<script lang="ts" setup>
import { usePermissionStoreWithOut } from "@/stores/permission";
import { ElMenu } from "element-plus";
import MenuRender from "@/components/menu-render.vue";
import { computed } from "vue";
import { useRoute } from "vue-router";

const { path } = useRoute();
const permissionStore = usePermissionStoreWithOut();
const menus = permissionStore.menus;
const source = permissionStore.source;

// menu index is code
const actived = computed(() => source.find((m) => m.path === path)?.code);
</script>

<template>
  <el-menu class="sidebar" mode="vertical" :default-active="actived" :default-openeds="[menus[0].code]">
    <menu-render v-for="menu in menus" :key="menu.id" :data="menu" />
  </el-menu>
</template>

<style lang="scss" scoped>
.sidebar {
  min-width: 200px;
  min-height: 100%;
}
</style>
